revision:
The future
The future
is already
is already
present
present
in today's world
in today's world
<div class="perspective-text">
<div class="perspective-line"><p></p><p>The future</p></div>
<div class="perspective-line"><p>The future</p><p>is already</p> </div>
<div class="perspective-line"><p>is already</p><p>present</p></div>
<div class="perspective-line"><p>present</p><p>in today's world</p></div>
<div class="perspective-line"><p>in today's world</p><p></p></div>
</div>
<style>
.perspective-text {margin-top: 15vw; margin-right: 35vw;height:30vw; color: brown; font-family: Arial; text-align: center; font-size: 4vw; font-weight: 800; letter-spacing: 0.15vw; text-transform: uppercase;}
.perspective-line { height: 3vw; overflow: hidden; position: relative;}
p { margin: 0; height: 2.8vw; line-height: 3vw; transition: all 0.5s ease-in-out;}
.perspective-line:nth-child(odd) { transform: skew(60deg, -30deg) scaleY(0.667);}
.perspective-line:nth-child(even) { transform: skew(0deg, -30deg) scaleY(1.337);}
.perspective-text:hover p {transform: translate(0, -3vw);}
.perspective-line:nth-child(1) { left: 2.4vw;}
.perspective-line:nth-child(2) { left: 2.4vw; background: #f07e6e;}
.perspective-line:nth-child(3) { left: 4vw; background: #84cdfa;}
.perspective-line:nth-child(4) { left: 5.6vw; background: #5ad1cd;}
.perspective-line:nth-child(5) { left: 6.5vw; }
</style>
When the content is not enough, the button should be at the bottom of the page. When there is enough content, the button should follow the content. When you have similar problems, use flex to achieve an intelligent layout!
<div class="container">
<div class="main" style="margin-left:1vw;">I have some experience in programming and front-end development.
Many years of programming experience have culminated in being able to develop front-end applications, writing
articles and making progress in the develsopers community. </div>
<div class="footer" style="margin-left:1vw;">rule</div>
<style>
.container {height: 35vh; width: 60vw; display: flex; flex-direction: column; justify-content: space-between; margin-top:3vw;}
.main {flex: 1; background-image: linear-gradient(95deg, lightgreen 0%, pink 99%,skyblue 100%); display: flex; align-items: center; justify-content: center; color: black;}
.footer {padding: 1.5vw 0; text-align: center; color: darkblue; font-size: 1.4vw;}
</style>
<div class="vertical-box">
<div class="spacer"></div>
<div class="centered-element horizontal-box">
<div class="spacer"></div>
<div class="centered-element">centered content</div>
<div class="spacer"></div>
</div>
<div class="spacer"></div>
</div>
<style>
.vertical-box {margin-left:10vw; display: flex; height: 20vw; width: 20vw; flex-flow: column;}
.horizontal-box {display: flex;flex-flow: row;}
.spacer {flex: auto;background-color: black;}
.centered-element {flex: none;background-color: white;}
</style>
<div>
<div id="document" class="vertical-box_a">
<div class="fixed-size"><button id="increase-size">increase container size</button></div>
<div id="flexible-content" class="flexible-size"></div>
<div class="fixed-size"><button id="decrease-size">decrease container size</button></div>
</div>
</div>
<script>
var height = 400;
document.getElementById('increase-size').onclick=function() {
height += 10;
if (height > 500) height = 500;
document.getElementById('document').style.height = (height + "px");
}
document.getElementById('decrease-size').onclick=function() {
height -= 10;
if (height < 200) height = 200;
document.getElementById('document').style.height = (height + "px");
}
</script>
<style>
.vertical-box_a {margin-left: 10vw; display: flex; height: 20vw; width: 20vw;flex-flow: column;}
.fixed-size {flex: none; height: 2vw; background-color: black; text-align: center;}
.flexible-size {flex: auto; background-color: skyblue;}
</style>
<div class="spec">
<div id="container" class="horizontal-container">
<div class="fixed-size_a">Element 1</div>
<div class="fixed-size_a">Element 2</div>
<div class="fixed-size_a">Element 3</div>
</div>
<button id="increase_size">increase container size</button><br>
<button id="decrease_size">decrease container size</button>
</div>
<script>
var width = 300;
document.getElementById('increase_size').onclick=function() {
width += 100;
if (width > 300) width = 300;
document.getElementById('container').style.width = (width + "px");
}
document.getElementById('decrease_size').onclick=function() {
width -= 100;
if (width < 100) width = 100;
document.getElementById('container').style.width = (width + "px");
}
</script>
<style>
.horizontal-container {display: flex; width: 300px; flex-flow: row wrap;}
.fixed-size_a {flex: none; width: 90px; margin-right: 10px; background-color: black; color: white; text-align: center;}
</style>